<template>
  <div>
      <div class="tj">
          <div class="left">
              <div class="title">
              <div>运营人员 (当天)</div>
              </div>
              <div class="lis1">
           <ul>
             <li><p>{{Operating.total}}</p><p :style="[{fontSize:'12px'}]">工作总数(个)</p></li>
             <li><p>{{Operating.completedTotal}}</p><p :style="[{fontSize:'12px'}]">完成工单(个)</p></li>
             <li><p>{{Operating.cancelTotal}}</p><p :style="[{fontSize:'12px'}]">拒绝工单(个)</p></li>
             <li><p>{{Operating.workerCount}}</p><p :style="[{fontSize:'12px'}]">运营人员数(个)</p></li>
          </ul>
              </div>
          </div>
          <div class="right">
              <div class="title">
              <div>运维人员 (当天)</div>
              </div>
              <div class="lis1">
           <ul>
              <li><p>{{maintenance.total}}</p><p :style="[{fontSize:'12px'}]">工作总数(个)</p></li>
             <li><p>{{maintenance.completedTotal}}</p><p :style="[{fontSize:'12px'}]">完成工单(个)</p></li>
             <li><p>{{maintenance.cancelTotal}}</p><p :style="[{fontSize:'12px'}]">拒绝工单(个)</p></li>
             <li><p>{{maintenance.workerCount}}</p><p :style="[{fontSize:'12px'}]">运营人员数(个)</p></li>
          </ul>
              </div>
          </div>
      </div>
      <div class="zt">
          <div class="lef">
              <div class="title">
              <div>工单状态</div>
              </div>
             <!-- 日期选择器 -->
              <div class="block">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="~"
                  :start-placeholder="startTime"
                  :end-placeholder="todayObj.end"
                  >
                </el-date-picker>
              </div>
               <!-- 周月年 -->
            <div class='date'>
           <el-button class="style" @click='workOrderStatusMethod(startOfWeek,"week")'>周</el-button>
         <el-button class="style" @click='workOrderStatusMethod(startOfMonth,"month")'>月</el-button>
         <el-button class="style" @click='workOrderStatusMethod(startOfYear,"yaer")'>年</el-button>
        </div>

       <div class="img">
          <div clas="pic">
          <img src="../../assets/t4.png" alt="">
        </div>
        <div class="txt">暂无数据</div>
       </div>
          </div>
          <div class="rig">
              <div class="title">
              <div>人效排名 (月度)</div>
              </div>
              <div class="select">
                 <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="全部" value="0" ></el-option>
                   <el-option :label="item.name" :value="item.id" v-for="item in currentPageRecords" :key='item.id'></el-option>
                 </el-select>
              </div>
              <div class="choose">
             <el-button class="style" :type="flag?'':'primary'"  @click='getRanking(false)'>运营人员</el-button>
             <el-button class="style"  :type="flag?'primary':''" @click='getRanking(true)'>运维人员</el-button>

          </div>
          <div v-for="(item,index) in list" :key='index'>
            <div class="rigdown"  >
          <div class='fl' >1</div>
          <div class='fc'>{{item.userName}}</div>
          <div class='fr'>{{item.workCount}}单</div>

          <!-- <img src="../../assets/t4.png" alt=""> -->
         </div>
          </div>

          </div>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getPersonnel, workOrderStatusApi, getRegionApi, getRanking } from '@/api/role'
export default {
data () {
  return {
    select: '0',
    pickerOptions: {
      shortcuts: [{
        text: '最近一周',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick (picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    },
    value: '',
    value2: '',
    currentPageRecords: [],
    startOfDay: '',
    endOfDay: '',
    startOfWeek: '',
    endOfWeek: '',
    startOfMonth: '',
    startOfYear: '',
    todayObj: {
      start: '',
      end: ''
    },
    startTime: '',
    Operating: {
      cancelTotal: '',
      completedTotal: '',
      date: '',
      progressTotal: '',
      repair: '',
      total: '',
      workerCount: ''
    },
    maintenance: {
      cancelTotal: '',
      completedTotal: '',
      date: '',
      progressTotal: '',
      repair: '',
      total: '',
      workerCount: ''
    },
    list: [],
    flag: false
  }
},
mounted () {
  this.getTheCurrentDayTimestamp()
  // 获取本周时间范围
  const startOfWeek = moment().weekday(1)
  const endOfWeek = moment().endOf('week')
  // console.log(startOfWeek.format('YYYY-MM-DD')) // 本周第一天的日期
  // console.log(endOfWeek.format('YYYY-MM-DD')) // 本周最后一天的日期
  this.startOfWeek = startOfWeek.format('YYYY-MM-DD')
  this.endOfWeek = endOfWeek.format('YYYY-MM-DD')
  this.startTime = this.startOfWeek

  // 获取本月时间范围
  const startOfMonth = moment().startOf('month')
  // const endOfMonth = moment().endOf('month')
  // console.log(startOfMonth.format('YYYY-MM-DD')) // 本月第一天的日期
  // console.log(endOfMonth.format('YYYY-MM-DD')) // 本月最后一天的日期
  this.startOfMonth = startOfMonth.format('YYYY-MM-DD')

  // 获取本年时间范围
  const startOfYear = moment().startOf('year')
  // const endOfYear = moment().endOf('year')
  console.log(startOfYear.format('YYYY-MM-DD')) // 本月第一天的日期
  // console.log(endOfYear.format('YYYY-MM-DD')) // 本月最后一天的日期
  this.startOfYear = startOfYear.format('YYYY-MM-DD')

  this.getPersonnel()
  this.getRegionMethod()
  this.getRanking(false)
},
watch: {
  select (val) {
    this.getRanking(this.flag)
  }
},
methods: {
  async workOrderStatusMethod (val, data) {
    if (data === 'week') {
      this.startTime = this.startOfWeek
    } else if (data === 'month') {
      this.startTime = this.startOfMonth
    } else {
      this.startTime = this.startOfYear
    }
    const res = await workOrderStatusApi(val, this.todayObj.end)
    console.log(res)
  },
  async getRegionMethod () {
    const res = await getRegionApi()
    // console.log(res)
    this.currentPageRecords = res.currentPageRecords
  },
  getWeekDates () {
    const today = moment()
    const startOfWeek = today.clone().startOf('isoWeek').add(0, 'day')
    const endOfWeek = today.clone().endOf('isoWeek').add(0, 'day')
    return { startOfWeek, endOfWeek }
  },
  getTheCurrentDayTimestamp () {
    this.todayObj.start = moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
    this.todayObj.end = moment(moment().valueOf()).format('YYYY-MM-DD')
    console.log(this.todayObj)
  },
  async getPersonnel () {
    const res = await getPersonnel(this.todayObj.start, this.todayObj.end)
    console.log(res)
    this.Operating = res[0]
    this.maintenance = res[1]
  },
  async getRanking (val) {
    this.flag = val
    const res = await getRanking(this.startOfMonth, this.todayObj.end, this.flag, this.select)
    // console.log(res)
    this.list = res
  }
}
}
</script>

<style lang="scss" scoped>
.tj {
    display: flex;
    .left {
        width: 846px;
        height: 166px;
        border-radius:20px ;
        background-color: #e9f3ff;
        padding:20px;
        margin-right:20px;
        background-image:url(../../assets/t1.png),url(../../assets/t2.png);
        background-repeat:no-repeat,no-repeat;
        background-position:0 0 ,calc(100% - 12px) 100% ;
        .title{
                width: 418px;
                height: 18px;
                padding-top:20px;
                padding-left:20px;
                -webkit-box-align:center;
                align-items: center;
                -webkit-box-flex:1;
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                color: #333;
              }
              .lis1 {
                ul {
                    display: flex;
                    justify-content: space-around;
                    list-style: none;
                    li {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        p {
                            margin-bottom: 0px;
                            color:#072074;
                       &:nth-child(1) {
                        font-size: 32px;
                        font-weight: 700;
                     }
                    }
                    }
                }
              }
    }
    .right {
        width: 846px;
        height: 166px;
        border-radius:20px;
        padding:20px;
        background-color: #fbefe8;
        background-image: url(../../assets/t3.png);
        background-repeat:no-repeat;
        background-position:calc(100% - 12px) 100% ;
        .title{
                width: 418px;
                height: 18px;
                padding-top:20px;
                padding-left:20px;
                -webkit-box-align:center;
                align-items: center;
                -webkit-box-flex:1;
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                color: #333;
              }
              .lis1 {
                ul {
                    display: flex;
                    justify-content: space-around;
                    list-style: none;
                    &:nth-child(1) {
                        margin-left: -35px;
                    }
                    li {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        p {
                            margin-bottom: 0px;
                         color:#ff5757;
                       &:nth-child(1) {
                        font-size: 32px;
                        font-weight: 700;
                     }
                    }
                    }
                }
              }
    }
}
.zt {
    margin-top: 20px;
    display: flex;
    .lef {
        position: relative;
        width: 1280px;
        height: 550px;
        border-radius: 20px;
        padding:20px;
        margin-right:20px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        .title {
            font-weight: 700;
            flex:1
        }
        .block {
            margin-right: 10px;
            ::v-deep .el-input__inner {
                width: 260px;
                height: 32px;
            }
        }
        .date {
            width: 129px;
            height: 34px;
            background-color: #f7fbff;
            display: flex;
            .style {
            margin: auto;
            color:#9ca3b4;
            border:none;
            height: 5px;
            line-height: 5px;
            padding:10px;
         }
     }
    .img {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top:50%;
      left:50%;
      .txt {
        margin: 25px 0 0;
        font-size:14px;
      }

    }
    }
    .rig {
        width: 413px;
        height: 550px;
        border-radius: 20px;
        padding:20px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        position: relative;
        ::v-deep .el-select {
            width: 95px;
            height: 30px;
        }
        .title {
            font-weight: 700;
            margin-top: 15px;
            font-size: 16px;
            color:#333;
        }
        .choose {
  background-color: rgba(233, 243, 255, 0.37);
  width: 177px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 50%;
  margin-left: -88.5px;
  margin-top: 50px;
  border-radius: 10px;

  a {
    text-decoration: none;
    color: #9ca3b4;
    padding: 5px;
    font-size: 14px;
  }
}
.rigdown{
  position: absolute;
  left: 30%;
  margin-left: -88.5px;
  margin-top: 100px;
  display: flex;
  justify-content:space-between;
  .fl {
    margin-right:15px;
  }
  .fc {
    flex:1;
    margin-right: 150px;
  }
}

.active {
  color: black !important;
  background: #fff;
  border-radius: 7px;
  font-weight: 600;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
}
        }
    }

</style>
